<template>
    <div class="home-container">
        <div class="nav-bar">
            <div class="nav-status" :style="{height:statusH + 'px'}"></div>

            <div style="width: 100%; height: 100%" class="nav-head">
                <img src="/static/assets/img/home/nav-background.png" class="nav-background" mode="aspectFill" />
                <div class="nav-content flex-row-space-between">
                    <img src="/static/assets/img/home/icon-scan@2x.png" class="icon-scan" @click="onClickScan" />
                    <div class="flex-col-v-center title" style="height: 48px; font-size: 21px; line-height: 48px;">
                        医生小帮手
                    </div>
                    <div class="icon-scan"></div>
                </div>
            </div>
            <div class="search-box" style="height: 38px; top: 16px" @click="onClickGoSearch">
                <img src="/static/assets/img/home/icon-search.png" class="icon-search" />
                <input disabled="true" placeholder="搜索问题/产品" class="input" placeholder-style="color: #afafaf" />
            </div>
        </div>

        <div class="home-content" :style="{'padding-top': statusH + 48 + 32 + 'px'}">

            <div class="bg-white top-holder ">
                <div class="flex-row-space-between sub-holder">
                    <div class="flex-col-v-center" @click="goToPostDetailWithAlias('whxz')">
                        <img src="/static/assets/img/home/icon-whxz.png" class="icon">
                        <span class="sub-title">雾化须知</span>
                    </div>
                    <div class="flex-col-v-center" @click="goToPostDetailWithAlias('whjb')">
                        <img src="/static/assets/img/home/icon-whjb.png" class="icon">
                        <span class="sub-title">雾化疾病</span>
                    </div>
                    <div class="flex-col-v-center">
                        <img src="/static/assets/img/home/icon-track-test.png" class="icon" @click="goToTest()">
                        <span class="sub-title">TRACK测试</span>
                    </div>
                </div>
                <div class="flex-row-v-center">
                    <div class="djdzk-holder">
                        <img src="/static/assets/img/home/back-djdzk.png" class="djdzk">
                    </div>
                    <div class="post-list-holder">
                        <block v-if="homeData['hot_post'].length">
                            <swiper class="swiper flex-1" autoplay vertical circular>
                                <block v-for="(item, index) in homeData['hot_post']" :key="index">
                                    <swiper-item class="flex-col-h-center">
                                        <div class="flex-row-v-center" @click="goToPostDetail(item[0]['id'])" >
                                            <span class="span">热</span>
                                            <div class="post-title flex-1">{{item[0]['title']}}</div>
                                        </div>
                                        <div class="flex-row-v-center" @click="goToPostDetail(item[1]['id'])" :class="{'no-show': !item[1]['id']}">
                                            <span class="span new">新</span>
                                            <div class="post-title flex-1">{{item[1]['title']}}</div>
                                        </div>
                                    </swiper-item>
                                </block>
                            </swiper>


                        </block>
                    </div>
                </div>

            </div>
            <div class="clear-10"></div>

            <div class="panel-info bg-white"  @click="goToHxyw(1)">
                <div class="panel-title">呼吸药物</div>
                <div class="panel-content flex-row">
                    <div class="flex-1 flex-col-h-center">
                        <div class="flex-row-v-center sub-title">
                            <div class="title-text">呼吸疾病用药及器械</div>
                            <span class="btn green">点击查看</span>
                        </div>
                        <div class="desc">
                            呼吸道疾病感染推荐使用....
                        </div>

                    </div>
                    <img class="img" src="/static/assets/img/home/whyw.png">
                </div>
            </div>
            <div class="clear-10"></div>
            <div class="panel-info bg-white" @click="goToHxyw(2)">
                <div class="panel-title">呼吸器械</div>
                <div class="panel-content flex-row">
                    <img class="img mr-20" src="/static/assets/img/home/hxqx.png">
                    <div class="flex-1 flex-col-h-center">
                        <div class="flex-row-v-center sub-title">
                            <div class="title-text">呼吸疾病用药及器械</div>
                            <span class="btn red">点击查看</span>
                        </div>
                        <div class="desc">
                            呼吸道疾病感染推荐使用....
                        </div>

                    </div>

                </div>
            </div>
            <div class="clear-10"></div>

            <div class="bg-white dzdk-holder flex-row-v-center" @click="goToDzbl">
                <div class="flex-1">
                    <div class="flex-row-v-center">
                        <div class="dzdk-title">电子病历打卡</div>
                        <img class="arrow-right-img" src="/static/assets/img/icon-home-right-arrow.png"/>
                        <!--<span class="arrow-right">-->
                            <!--<span class="arrow"></span>-->
                        <!--</span>-->
                    </div>

                    <div class="dzdk-desc">
                        医生实时查看 监控治疗进度
                    </div>
                </div>
                <img class="dzdk-img" src="/static/assets/img/home/dzbldk.png">
            </div>
        </div>
    </div>
</template>

<script>
  import global from 'global'
  import Core from 'core'
  import Common from 'common'

  export default {
    data () {
      return {
        statusH: global.state.statusH,

        homeData: {
          online_consult: {},
          schedule: [],
          recommend_goods: {},
          hot_post: [],
          hospital: {}
        }
      }
    },

    mounted () {
      // this._getHomePage("", "");
      this._getUserInfo()
    },

    onLoad (query) {
      if (query && query.scene) {
        let self = this
        let scene = decodeURIComponent(query.scene)
        if (scene.indexOf('sp-') >= 0) {
          let index = scene.indexOf(',')
          let hospitalId = scene.substring(3, index)
          let index2 = scene.indexOf('uid-') + 4
          let doctorUid = scene.substring(index2, scene.length)
          this._getHomePage(hospitalId, doctorUid)
          // 绑定医生
          let json = {
            type: 1,
            uid: doctorUid,
            hospital_id: hospitalId,
            hash: ''
          }
          if (Common.isLogin()) {
            let user = Core.Data.getUser()
            if (user.user_track != null && user.user_track.uid !== doctorUid) {
              // wx.showModal({
              //   title: '提示',
              //   content: `您已经是${user.user_track.doctor_name}医生的患者，确定要更换医生么?`,
              //   success (r) {
              //     if (r.confirm) {
                    self._userTrackByScan(JSON.stringify(json))
              //     }
              //   }
              // })
            } else {
              self._userTrackByScan(JSON.stringify(json))
            }
          } else {
            Core.Data.set('json', json)
            Common.go(`/pages/登录页/main`)
          }
        }
      } else {
        let user = Core.Data.getUser()
        if (Common.isLogin() && user.user_track) {
          let hospitalId = user.user_track.hospital_id
          let doctorUid = user.user_track.uid
          this._getHomePage(hospitalId, doctorUid)
        } else {
          this._getHomePage('', '')
        }
      }
    },

    methods: {

      goToTest(){
        Common.go(`/pages/web/main?url=https://static.hzlytech.cn`)
      },

      onClickGoSearch () {
        Common.go(`/pages/搜索/main`)
      },

      onClickScan () {
        if (!Common.isLogin()) {
          wx.showModal({
            title: '',
            content: '您还未登录',
            showCancel: false
          })
          return
        }
        let self = this
        wx.scanCode({
          success (res) {
            if (res && res.path) {
              let path = decodeURIComponent(res.path)
              if (path.indexOf('sp-') >= 0) {
                let index = path.indexOf(',')
                let index2 = path.indexOf('sp-')
                let hospitalId = path.substring(index2 + 3, index)
                let index3 = path.indexOf('uid-') + 4
                let doctorUid = path.substring(index3, path.length)
                self._getHomePage(hospitalId, doctorUid)
                // 绑定医生
                let user = Core.Data.getUser()
                let json = {
                  type: 1,
                  uid: doctorUid,
                  hospital_id: hospitalId,
                  hash: ''
                }
                if (user.user_track != null && user.user_track.uid !== doctorUid) {
                  // wx.showModal({
                  //   title: '提示',
                  //   content: `您已经是${user.user_track.doctor_name}医生的患者，确定要更换医生么?`,
                  //   success (r) {
                  //     if (r.confirm) {
                        self._userTrackByScan(JSON.stringify(json))
                  //     }
                  //   }
                  // })
                } else {
                  self._userTrackByScan(JSON.stringify(json))
                }
              }
            } else {
              wx.showModal({
                title: '提示',
                content: `无效的二维码`,
                showCancel: false
              })
            }
          }
        })
      },


      goToHxyw (category) {
        Common.go(`/pages/呼吸药物/main?category=${category}`)
      },

      goToShopPage () {
        Common.switchTab('/pages/产品中心/main')
      },

      goToChatPage () {
        Common.switchTab('/pages/在线咨询2/main')
      },

      goToPostDetail (postId) {
        if (!postId) return;
        Common.go(`/pages/疾病知识/详情/main?post_id=${postId}`)
      },

      goToPostDetailWithAlias (alias) {
        Common.go(`/pages/雾化详情/main?alias=${alias}`)
      },

      goToDzbl () {
        Common.go(`/pages/电子病历/main`)
      },

      _getHomePage (hospitalId, doctorUid) {

        Core.Data.setHospitalId(hospitalId ? hospitalId : 1)
        let json = ''
        if (hospitalId) {
          json = {
            type: 1,
            uid: doctorUid,
            hospital_id: hospitalId,
            hash: ''
          }
        }
        Core.Api.Index.getHomePage(json ? JSON.stringify(json) : '')
          .then(res => {
            let hostPost = this._processHotPost(res['hot_post'])
            this.homeData = {
              online_consult: res['online_consult'][0] || {},
              schedule: res['schedule'] || [],
              recommend_goods: res['recommend_goods'][0] || {},
              hot_post: hostPost,
              hospital: res['hospital']
            }
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _processHotPost(list) {
        let finalList = [];
        if(list && list.length) {
            if (list.length % 2 > 0) {
              list.push({id: 0});
            }
            let finalLength = list.length/2;
            for(let i = 0; i < finalLength; i++) {
              finalList[i] = [list[2*i], list[2*i + 1]]
          }
        }
        console.log(finalList);
        return finalList;
      },

      _userTrackByScan (json) {
        Core.Api.User.userTrackByScan(json)
          .then(res => {
            this._getUserInfo((userTrack) => {
              // wx.showModal({
              //   title: '提示',
              //   content: `您成为了${userTrack.doctor_name}医生的患者`,
              //   success (r) {
              //   }
              // })
            })
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getUserInfo (func) {
        if (!Common.isLogin()) {
          return
        }
        Core.Api.User.getUserInfo()
          .then(res => {
            Core.Data.setUser(res.user)
            if (func) {
              func(res.user.user_track)
            }
          })
          .catch(err => {
            // Core.Util.showTip("", err.message);
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
    .home-container {
        background: #f9f9f9;
        height: 100%;

        .nav-bar {
            .nav-background {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }

            .nav-content {
                padding: 0 12px;
                position: relative;
                z-index: 2;

                .icon-scan {
                    width: 20px;
                    height: 19px;
                }
            }

            .search-box {
                position: relative;
                z-index: 2;
                padding: 0 14px;

                .icon-search {
                    position: absolute;
                    width: 14px;
                    height: 15px;
                    top: calc(50% - 7px);
                    left: calc(50% - 60px);
                }

                .input {
                    font-size: 13px;
                    height: 100%;
                    text-align: center;
                    background: white;
                    border-radius: 15px;
                    box-shadow: 0 2px 12px #edeeee;
                }

                .input-placeholder {
                    color: #1934D9;
                }
            }
        }

        .title {
            color: #525252;
        }

        .placeholder {
            min-height: 89px;
        }

        .home-content {
            background: #f9f9f9;

            .top-holder {
                font-size: 0;
                padding: 40px 20px 10px;
                position: relative;
                .icon {
                    width: 54px;
                    height: 54px;
                    margin-bottom: 9px;
                }
                .sub-title {
                    font-size: 14px;
                    color: #525252;
                }
                .sub-holder {
                    padding: 0 10px;
                    margin-bottom: 12px;
                }
                .djdzk-holder {
                    padding: 7px 15px 7px 0;
                    border-right: 1px solid #c9c9c9;
                    .djdzk {
                        height: 19px;
                        width: 105px;
                    }
                }
                .post-list-holder {
                    padding: 0 10px;
                    width: 100%;
                    .swiper {
                        height: 60px;
                    }
                    .span {
                        line-height: 12px;
                        font-size: 10px;
                        margin-right: 10px;
                        padding: 0 8px;
                        border-radius: 10px;
                        color: #f04343;
                        border: 1px solid #f04343;
                        position: relative;
                        top: -1px;

                    }
                    .span.new {
                        color: #fe9937;
                        border: 1px solid #fe9937;
                    }
                    .post-title {
                        font-size: 12px;
                        color: #525252;
                        overflow: hidden;
                        max-width: 150px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }

            .panel-info {
                padding: 10px 23px;
                .panel-title {
                    font-size: 19px;
                    color: #525252;
                    text-align: center;
                }
                .img {
                    width: 95px;
                    height: 53px;
                }
                .panel-content {
                    margin-top: 4px;
                    .sub-title {
                        .title-text {
                            font-size: 14px;
                            color: #525252;
                            margin-right: 10px;
                        }


                        .btn {
                            font-size: 12px;
                            color: #fff;
                            border-radius: 10px;
                            padding: 0 4px;
                        }
                        .btn.green {
                            background: #0ec5a9;
                        }
                        .btn.red {
                            background: #ff7d00;
                        }
                    }
                    .desc {
                        font-size: 12px;
                        color: #939393;
                        margin-top: 4px;
                        max-width: 200px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }

            .dzdk-holder, .panel-info {


            }

            .dzdk-holder {
                padding: 0 23px;
                .dzdk-img {
                    width: 170px;
                    height: 90px;
                }
                .dzdk-title {
                    font-size: 19px;
                    color: #525252;
                }
                .arrow-right-img {
                    width: 15px;
                    height: 15px;
                    margin-left: 5px;
                    position: relative;
                    top: 2px;
                }
                .arrow-right {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    background: #0ec5a9;
                    border-radius: 50%;
                    margin-top: -5px;
                    margin-left: 5px;
                    .arrow {
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        border-bottom: 1px solid #fff;
                        border-right: 1px solid #fff;
                        transform: rotate(-45deg);
                        position: relative;
                        top: -7px;
                        left: 2px;
                    }
                }
                .dzdk-desc {
                    margin-top: 8px;
                    font-size: 12px;
                    color: #939393;
                    max-width: 200px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }


            .doctor-plan-holder {
                background: #EEF4F7;
                padding: 9px 27px;
                height: 40px;

                .icon-click {
                    width: 17px;
                    height: 17px;
                    margin-right: 7px;
                }

                .plan-text {
                    font-size: 14px;
                    color: #403E3E;
                    overflow: hidden;
                }

                .btn-text {
                    font-size: 13px;
                    color: #5BD4E7;
                }

                .swiper {
                    height: 20px;
                }
            }

            .ad-img {
                height: 190px;
                width: 100%;
                background: #ECF2F6;
            }

            .post-holder {
                padding: 13px 25px;

                .post-title {
                    text-align: center;
                    font-size: 18px;
                    background-image: -webkit-linear-gradient(bottom, #649AEA, #5BD4E7);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    margin-bottom: 10px;
                }

                .icon-bg {
                    height: 50px;
                    width: 115px;
                }

                .post-item {
                    & + .post-item {
                        margin-top: 8px;
                    }

                    .dot {
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background: #AAAAAA;
                        margin-right: 10px;
                    }

                    .post-name {
                        font-size: 13px;
                        color: #484545;
                    }
                }
            }

        }

        .height-20 {
            height: 20px;
        }

        .height-32 {
            height: 32px;
        }

        .bg-white {
            background: white;
        }

        .mb-8 {
            margin-bottom: 8px;
        }

        .mr-20 {
            margin-right: 20px;
        }
        .no-show {
            visibility: hidden;
        }
    }
</style>
